<template>
  <view class="container">
    <view class="card">
      <view style="width: 100%">
        <view style="font-size: 28rpx; margin-bottom: 20rpx">平均油耗</view>
        <view class="num" style="margin-bottom: 20rpx">{{
          info.avgRefuelLiters || 0
        }}</view>
        <view style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          ">
          <view style="text-align: left">
            <view class="title-min">车辆号</view>
            <view class="title-max">{{ info.licenseNumber || "-" }}</view>
          </view>
          <view style="text-align: left">
            <view class="title-min">累计行驶里程</view>
            <view class="title-max">{{ info.accumulativeMileage || "-" }}KM</view>
          </view>
          <view style="text-align: left">
            <view class="title-min">累计加油量(升)</view>
            <view class="title-max">{{
              info.accumulativeRefuelLiters || "-"
            }}</view>
          </view>
        </view>
      </view>
    </view>
    <view style="font-size: 32rpx; font-weight: 600; margin: 20rpx 0">加油记录</view>
    <view class="li_box" v-for="(i, index) in list" :key="index"  @click="edit(i)">
      <view style="display: flex; align-items: center">
        <view style="display: flex; flex-direction: column">
          <view style="
              font-size: 36rpx;
              font-weight: 700;
              margin-bottom: 10rpx;
              vertical-align: text-top;
            ">
            {{ i.refuelLiters }}<text style="font-size: 24rpx">L</text>
          </view>
          <view style="font-size: 28rpx"> {{ i.refuelDate }} </view>
        </view>
      </view>
      <u-icon color="#000000" name="arrow-right"></u-icon>

    </view>
    <!-- <view class="list">
      <view>
        <view v-for="item in list" style="margin-top: 20px">
          <view
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <view style="text-align: center; width: 33%">{{
              item.refuelDate
            }}</view>
            <view style="text-align: center; width: 33%">{{
              item.refuelLiters
            }}</view>
            <view style="display: flex; justify-content: center; width: 33%">
              <view class="edit" @click="edit(item)">编辑</view>
            </view>
          </view>
        </view>
        <view v-if="list.length === 0" style="text-align: center"
          >暂无记录</view
        >
        <view style="height: 20px"></view>
        <u-line color="#fff"></u-line>
      </view>
    </view> -->
    <view class="add" @click="add">新增记录</view>
    <!--  -->
    <u-overlay :show="show">
      <view class="warp">
        <view class="rect" @tap.stop>
          <view style="height: 40px"></view>
          <view style="width: 90%; margin-left: 5%">
            <view style="display: flex; align-items: center">
              <view style="width: 30%; font-weight: 500">选择日期</view>
              <view class="gray">
                <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
                  <input v-model="date" type="text" disabled placeholder="请选择日期" />
                </picker>
              </view>
            </view>
            <view style="height: 20px"></view>
            <view style="display: flex; align-items: center">
              <view style="width: 30%; font-weight: 500">加油量(升)</view>
              <view class="gray">
                <input type="text" v-model="refuelLiters" placeholder="请输入" />
              </view>
            </view>
          </view>
          <view style="height: 30px"></view>
          <view style="width: 90%; margin-left: 5%">
            <view style="
                display: flex;
                align-items: center;
                justify-content: space-between;
              ">
              <view style="width: 32%" v-if="flag == 'edit'">
                <view class="cancel" v-if="flag == 'edit'" @click="dele">删除</view>
              </view>
              <view style="width: 32%" :style="flag == 'edit' ? 'width:32' : 'width:48%'">
                <view class="btn" @click="show = false">取消</view>
              </view>
              <view style="width: 32%" :style="flag == 'edit' ? 'width:32' : 'width:48%'">
                <view class="btn" @click="submit">保存</view>
              </view>
            </view>
          </view>
          <view style="height: 30px"></view>
        </view>
      </view>
    </u-overlay>
  </view>
</template>
<script>
import {
  refuelList,
  refuelCard,
  refuelAdd,
  refuelEdit,
  refuelDel,
} from "../api/api.js";
export default {
  data() {
    return {
      list: [],
      show: false,
      flag: "",
      info: {},
      date: "",
      refuelLiters: "",
      id: "",
      carNum: "",
      delId: "",
    };
  },
  methods: {
    getList() {
      refuelList().then((res) => {
        console.log(res.data, "res.data");
        this.list = res.data.data;
        if (res.data.code == 500) {
          uni.showToast({
            title: res.data.msg,
            icon: 'none',
            duration: 2000
          })
          setTimeout(() => {
            uni.navigateBack({
              delta: 1
            });
          }, 2000)
        }
      });
    },
    getCard(i) {
      refuelCard(i).then((res) => {
        console.log(res.data, "信息");
        this.info = res.data.data;
      });
    },
    add() {
      this.flag = "add";
      this.show = true;
    },
    edit(i) {
      this.flag = "edit";
      console.log(i);
      this.id = i.id;
      this.delId = i.id;
      this.date = i.refuelDate;
      this.refuelLiters = i.refuelLiters;
      // this.carNum = i.licenseNumber;
      this.show = true;
    },
    bindDateChange: function (e) {
      this.date = e.detail.value;
    },
    submit() {
      if (this.date == "" || this.refuelLiters == "") {
        uni.showToast({
          title: "请输入完整",
          icon: "none",
        });
      } else {
        if (this.id == "") {
          refuelAdd({
            refuelLiters: this.refuelLiters,
            licenseNumber: this.carNum,
            refuelDate: this.date,
          }).then((res) => {
            if (res.data.code == 200) {
              uni.showToast({
                title: res.data.msg,
                duration: 2000,
              });
              this.getList();
              this.clearForm();
            } else {
              uni.showToast({
                title: res.data.msg,
                duration: 2000,
                icon: "none",
              });
            }
          });
        } else {
          refuelEdit({
            refuelLiters: this.refuelLiters,
            licenseNumber: this.carNum,
            refuelDate: this.date,
            id: this.id,
          }).then((res) => {
            if (res.data.code == 200) {
              uni.showToast({
                title: res.data.msg,
                duration: 2000,
              });
              this.getList();
              this.clearForm();
            } else {
              uni.showToast({
                title: res.data.msg,
                duration: 2000,
                icon: "none",
              });
            }
          });
        }
      }
    },
    dele() {
      let t = this;
      uni.showModal({
        title: "删除",
        content: "确定删除当前记录吗",
        success: function (res) {
          if (res.confirm) {
            refuelDel({
              ids: [t.delId],
            }).then((res) => {
              if (res.data.code == 200) {
                uni.showToast({
                  title: res.data.msg,
                  duration: 2000,
                });
                t.delId = "";
                t.getList();
                t.getCard();
                t.clearForm();
              } else {
                uni.showToast({
                  title: res.data.msg,
                  duration: 2000,
                  icon: "none",
                });
              }
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    clearForm() {
      this.date = "";
      this.id = "";
      this.refuelLiters = "";
      this.show = false;
    },
  },
  onLoad() { },
  onShow() {
    this.getList();
    this.carNum = uni.getStorageSync("compLicenseNumber")[0];
    this.getCard(this.carNum);
    console.log(this.carNum, "carNum");
  },
};
</script>
<style lang="scss">
.li_box {
  margin-top: 20rpx;
  border-radius: 40rpx;
  padding: 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  height: 100rpx;
}

.container {
  min-height: 100vh;
  box-sizing: border-box;
  width: 100vw;
  padding: 20rpx;
  background: #f2f8f5;
  overflow-y: scroll;
  background-color: #f3f3f3;
}

.card {
  width: 100%;
  box-sizing: border-box;
  padding: 40rpx;
  background-image: url("https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2F%E6%B2%B9%E8%80%97%E8%AE%A1%E7%AE%97.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #000000;
}

.num {
  font-size: 50px;
  font-weight: bold;
  color: #000000;
}

.list {
  background: #b8e2c7;
  width: 95%;
  margin-left: 2.5%;
  border-radius: 5px;
}

.list-head {
  background: #18512c;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.title-min {
  font-size: 14px;
}

.title-max {
  margin-top: 10rpx;
  font-weight: 500;
  font-size: 28rpx;
}

.warp {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.rect {
  width: 90vw;
  // height: 120px;
  background-color: #fff;
  color: #000000;
  font-size: 17px;
  font-weight: 500;
  border-radius: 10px;
}

.edit {
  background: #18512c;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.add {
  background: #000;
  border-radius: 10px;
  width: 95%;
  color: #fff;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 15px;
}

.cancel {
  height: 50px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: red;
}

.btn {
  height: 50px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #000000;
}

.gray {
  width: 70%;
  background: #d9d9d9;
  height: 40px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

</style>
